<template>
  <div class="text-white content w-full">
    <BorderBox1 class="bg-gray-800 py-1 w-full h-full">
      <div class="grid grid-rows-5 h-full gap-2">
        <div
          class="top grid row-span-3 grid-cols-4 gap-2 h-full overflow-y-auto"
        >
          <div class="left grid col-span-1 pt-6 pl-6">
            <MemberData :data="data"></MemberData>
            <div class="mt-2">
              <percent
                :isShowBar="isShowBar"
                :LeftBarData="LeftBarData"
                :RightBarData="RightBarData"
              ></percent>
            </div>
          </div>
          <div class="middle grid grid-rows-5 col-span-2">
            <MainTitle></MainTitle>
            <div class="w-full row-span-4">
              <DailyAdd
                :isShow="isShow"
                :line="line"
                :registrants_rank="registrants_rank"
              ></DailyAdd>
            </div>
          </div>
          <div class="right col-span-1 pt-6 pr-6">
            <process
              :isShowLine="isShowLine"
              :plan_histogram="plan_histogram"
              :plan_rank="plan_rank"
            ></process>
          </div>
        </div>
        <div class="bottom grid row-span-2 grid-cols-4 gap-2 h-full">
          <div class="left col-span-1 pl-6 pb-4">
            <Top :illList="illList"></Top>
          </div>
          <div class="left col-span-1  pb-4" style="padding-left:0">
            <BZLineBox
              :BZlineData="BZlineData"
              :isShowBZLine="isShowBZLine"
            ></BZLineBox>
          </div>
          <div class="middle col-span-1 pb-4">
            <UsePercent
              :isShowPie="isShowPie"
              :hierarchy_pie="hierarchy_pie"
            ></UsePercent>
          </div>
          <div class="col-span-1 pb-4 pr-6">
            <Today
              :service_histogram="service_histogram"
              :isShowHistogram="isShowHistogram"
            ></Today>
          </div>
        </div>
      </div>
    </BorderBox1>
  </div>
</template>

<script setup>
import { BorderBox1 } from '@kjgl77/datav-vue3'
import { ref } from 'vue'
import { getScUserData } from '@/api/memberManager'
import MemberData from '@/view/allUser/model/memberData.vue'
import DailyAdd from '@/view/allUser/model/dailyAdd.vue'
import percent from '@/view/allUser/model/percent.vue'
import Process from '@/view/allUser/model/process.vue'
import Top from '@/view/allUser/model/top10.vue'
import Today from '@/view/allUser/model/today.vue'
import BZLineBox from '@/view/allUser/model/BZLine.vue'
import UsePercent from '@/view/allUser/model/usePercent.vue'
import MainTitle from '@/view/allUser/components/mainTitle.vue'

const data = ref({})
const LeftBarData = ref([])
const RightBarData = ref([])
const illList = ref([])
const line = ref({})
const isShow = ref(false)
const isShowPie = ref(false)
const isShowHistogram = ref(false)
const isShowLine = ref(false)
const isShowBar = ref(false)
const isShowBZLine = ref(false)
const registrants_rank = ref([])
const hierarchy_pie = ref([])
const plan_histogram = ref({})
const plan_rank = ref([])
const service_histogram = ref({})
const BZlineData=ref({})
const initPage = async() => {
  const res = await getScUserData()
  data.value = res.data
  LeftBarData.value = data.value.age_pie
  RightBarData.value = data.value.sex_pie
  data.value.disease_rank.sort((a,b)=>b.count - a.count)
  illList.value = data.value.disease_rank
  illList.value.forEach((item, index) => {
    // 获取illList每一项count的总和
    const sum = illList.value.reduce((prev, cur) => {
      return prev + cur.count
    }, 0)
    // 计算每一项count的百分比
    item.percent = ((item.count / sum) * 100).toFixed(2) + '%'
    if (item.count.toString().length > 4) {
      var countWan = item.count.toString()
      countWan = countWan.substring(0, countWan.length - 4) + '万'
      
      item.count = countWan
    }
  })
  line.value = data.value.add_line
  if (line.value) {
    isShow.value = true
  }
  registrants_rank.value = data.value.registrants_rank
  hierarchy_pie.value = data.value.hierarchy_pie
  if (hierarchy_pie.value) {
    isShowPie.value = true
  }
  plan_histogram.value = data.value.plan_histogram
  if (plan_histogram.value) {
    isShowLine.value = true
  }
  plan_rank.value = data.value.plan_rank
  // BZlineData.value ={num100: 130,num80:130,num60: 20,num40:130,num20: 0,num0: 110}
  BZlineData.value =data.value.fanganpercent
  if (BZlineData.value) {
    isShowBZLine.value = true
  }
  service_histogram.value = data.value.service_histogram
  if (service_histogram.value) {
    isShowHistogram.value = true
  }
   

  if(LeftBarData.value?.length && RightBarData.value?.length){
    isShowBar.value = true
  }
}

initPage()
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 130px);
}
</style>
